<!--
 * @Descripttion : 
 * @Autor        : Lilong
 * @Date         : 2022-09-30 10:53:02
 * @LastEditTime : 2022-10-01 16:01:07
 * @FilePath     : \组件\插槽\具名插槽\示例\APP.vue
-->
// src/APP.vue

/**
v-slot缩写为#
v-slot="header"  等价于 #header
<slot name="名称"></slot>  name指定名称

<div class="container">
  <header>
    <h1>Here might be a page title</h1>
  </header>
  <main>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </main>
  <footer>
    <p>Here's some contact info</p>
  </footer>
</div>
*/

<template>
  <base-layout>
    <template v-slot:header>
      <h1>Here might be a page title</h1>
    </template>

    <template v-slot:default>
      <p>A paragraph for the main content.</p>
      <p>And another one.</p>
    </template>

    <template v-slot:footer>
      <p>Here's some contact info</p>
    </template>
  </base-layout>
</template>

<script setup>
import BaseLayout from './components/base-layout.vue'
</script>